<template>
  <div ref="proportion" :style="{width: '100%', height: '300px'}"></div>
</template>

<script setup name="Proportion">

import * as echarts from 'echarts';
import { proportionData } from '@/api/coal/realtimeData';

const proportion = shallowRef({})
const myChart = shallowRef({})

let flushProportion = ref<String>("");

const props = defineProps({
  deviceId: {
    type: Number,
    default: null,
  },
})

const timeData = ref([])
const lumpCoalData = ref([])
const slackData = ref([])
const sieveData = ref([])
const otherData = ref([])
const timeTitle = ref('分类占比')

onMounted(() => {
  const resizeOb = new ResizeObserver((entries) => {
    for (const entry of entries) {
      echarts.getInstanceByDom(entry.target).resize();
    }
  })
  resizeOb.observe(proportion.value)
  initChart()
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.value.resize()
  });

  /*flushProportion = setInterval(()=>{
    // 根据设备id查询折线图数据
    initCharData().then(resp=>{
      myChart.value.setOption({
        title: {
          text: '【'+timeTitle.value+'】'
        },
        xAxis: {
          data: timeData.value,
        },
        series: [
          {
            data: volumeData.value
          },
          {
            data: weightData.value
          }]
      })
    });
  },1000*5)*/
})


function getData(){
  timeData.value = []
  lumpCoalData.value = []
  slackData.value = []
  sieveData.value = []
  otherData.value = []
  for(let i = 0; i <= 200; i+=5){
    timeData.value.push(i)
    lumpCoalData.value.push(50+Math.floor(Math.random() * 50))
    slackData.value.push(50+Math.floor(Math.random() * 50))
    sieveData.value.push(50+Math.floor(Math.random() * 50))
    otherData.value.push(50+Math.floor(Math.random() * 50))
  }
}

function initChart() {
  nextTick(() => {
    myChart.value = echarts.init(proportion.value)
    initCharData().then(resp=>{
      initOption();
    })
  })
}

function initCharData(){
  return proportionData(props.deviceId).then(resp=>{
    timeData.value = resp.timeList
    lumpCoalData.value = resp.lumpCoalList
    slackData.value = resp.slackList
    sieveData.value = resp.sieveList
    otherData.value = resp.otherList
  })

}

function initOption(){
  let option = {
    title: {
      text: timeTitle.value
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show:true
        }
      },
      formatter: function (params){
        let tip = params[0].axisValue + "<br />"
        if (params !== null && params.length > 0){
          tip += params[0].marker + params[0].seriesName + ':  ' + params[0].value + '%<br />'
          tip += params[1].marker + params[1].seriesName + ':  ' + params[1].value + '%<br />'
          tip += params[2].marker + params[2].seriesName + ':  ' + params[2].value + '%<br />'
          tip += params[3].marker + params[3].seriesName + ':  ' + params[3].value + '%<br />'
        }
        return tip
      },
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['块煤', '末煤', '空筛板', '其他']
    },
    grid: { //调整图表上下左右位置
      top:'15%',
      left: '3%',
      right: '3%',
      bottom: '15%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: timeData.value,
      axisLabel : {
        showMaxLabel: true,
        interval : 'auto',
        formatter: function (value, index) {
          return value.substring(0,5);
        }
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      max: 100,
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: '块煤',
        type: 'line',
        smooth: true,
        data: lumpCoalData.value
      },
      {
        name: '末煤',
        type: 'line',
        smooth: true,
        data: slackData.value
      },
      {
        name: '空筛板',
        type: 'line',
        smooth: true,
        data: sieveData.value
      },
      {
        name: '其他',
        type: 'line',
        smooth: true,
        data: otherData.value
      }
    ]
  };
  myChart.value.setOption(option)
}

onBeforeUnmount(() => {
  clearInterval(flushProportion)
})

</script>
